<template>
	<view class="contractList">

		<!-- jump('/pages-landlord/contract/contractSigningNew?id='+item.id) -->
		<z-paging ref="paging" v-model="list" @query="queryList">
			<view v-if="!roomId" slot="top">
				<u-tabs :list="tabArr" :current="currentValue" :scrollable="false" @change="changeTab" lineWidth="22"
					lineColor="#f56c6c" :activeStyle="{
					color: '#000',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}" lineHeight="4">
				</u-tabs>
			</view>
			<view class="cord"
				@click.stop="$Tips('/pages-landlord/room-manage/rental-registration?contract_id=' + item.id)"
				v-for="(item,index) in list" :key="index">
				<view class="cord-box">
					<view class="">
						<view class="">
							{{ item.build_name }}
						</view>
						<view style="margin: 16rpx 0; color: #999;">
							{{ item.room_name }}
						</view>
					</view>
					<view class="img">
						<image style="width: 100%; height: 100%;"
							:src="item.status==1? '../static/images/yq.png':item.status==3? '../static/images/tz.png':'../static/images/wq.png'" mode=""></image>
					</view>
				</view>
				<view style="color:#fe6726;">
					￥{{item.money_zu}}/月
				</view>
				<view class="cord-bottom">
					<template v-if="currentValue===1">
						<view class="btn btn-red" @click.stop="contractAudit(item.id)">审核</view>
						<view class="btn" @click.stop="contractDel(item.id)">删除</view>
					</template>
					<template v-if="currentValue===2">
						<view class="btn" @click.stop="contractRevoke(item.id)">撤回</view>
					</template>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		contractLists,
		contractListStat,
		contractAudit,
		contractDel,
		contractRevokeAudit
	} from '@/api/landlord.js'
	export default {
		data() {
			return {
				list: [],
				roomId: 0,
				tabArr: [{
					id: 0,
					name: '全部'
				}, {
					id: 1,
					name: '待审'
				}, {
					id: 2,
					name: '正常'
				}, {
					id: 3,
					name: "提醒"
				}, {
					id: 4,
					name: "过期"
				}],
				currentValue: 0,
				total: 0
			};
		},
		onShow(options) {
			this.list = []
			this.refreshList()
		},
		onLoad(options) {
			if (typeof options.room_id !== 'undefined') {
				this.roomId = options.room_id
			}
		},
		methods: {
			handleSuccess() {
				this.$Toast('操作成功')
				this.refreshList()
			},
			contractRevoke(id) {
				contractRevokeAudit({
					contract_id: id
				}).then(res => {
					this.handleSuccess()
				})
			},
			//审核
			contractAudit(id) {
				contractAudit({
					id: id
				}).then(res => {
					this.handleSuccess()
				})
			},
			contractDel(ids) {
				contractDel({
					ids: ids
				}).then(res => {
					this.handleSuccess()
				})
			},
			getTabsListCount() {
				contractListStat().then(res => {
					let data = res.data.data
					this.tabArr[0].name = `全部(${data.all})`
					this.tabArr[1].name = `待审(${data.ds})`
					this.tabArr[2].name = `正常(${data.zc})`
					this.tabArr[3].name = `提醒(${data.tx})`
					this.tabArr[4].name = `过期(${data.gq})`
				})
			},
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.refresh();
					this.getTabsListCount();
				}
			},
			queryList(pageNo, pageSize) {
				contractLists({
					page: pageNo,
					page_size: pageSize,
					type: this.currentValue,
					room_id: this.roomId
				}).then(res => {
					this.total = res.data.data.total
					this.$refs.paging.complete(res.data.data.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
			// 路由跳转
			jump(url) {
				uni.navigateTo({
					url: url
				});
			},
			changeTab(e) {
				this.list = []
				this.currentValue = e.index
				this.refreshList()
			}
		}
	};
</script>

<style lang="scss" scoped>
	.cord {
		box-sizing: border-box;
		width: 95%;
		margin: 30rpx auto;
		box-sizing: border-box;
		padding: 20rpx;
		background: #fff;
		border-radius: 15rpx;
	}

	.cord-box {
		display: flex;
		justify-content: space-between;

		.img {
			width: 96rpx;
			height: 82rpx;
		}
	}

	.cord-bottom {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;

		.btn {
			border: 1px solid #D1D2D4;
			border-radius: 28rpx;
			margin-left: 16rpx;
			padding: 8rpx 32rpx;

		}
	}
</style>